<template>
	<view>
		<view class="bg">
			<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/bg.png" mode="widthFix" class="width100">
			</image>
		</view>
		<view class="conetent-box pore">
			<navCom></navCom>
			<u-gap height="5"></u-gap>
			<view class="flex-jus warning" v-if="userProfile.idCert === 1">
				<view class="flex">
					<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/warning.png" mode=""
						style="width: 30rpx;height: 30rpx;">
					</image>
					<text class="f26 cfff ml10">为了正常使用平台功能，请完成认证！</text>
				</view>
				<view>
					<u-button size="mini" type="primary" color="#319EFF"
						@click="nologinJump('/subpage/meethuangshi/acceptAuth?isUpdate=true')">去认证</u-button>
				</view>
			</view>
			<u-gap height="10"></u-gap>
			<view class="user-box">
				<view class="flex-jus">
					<view class="user_img"
						@click="nologinJump('/subpage/meethuangshi/userInfo?uid='+userProfile.userId)">
						<u-image :src="api_host + userProfile.userAvatar" shape="circle" width="160rpx"
							height="160rpx"></u-image>
					</view>
					<view class="flex1 ml20 flex-jus flex-start">
						<view @click="nologinJump('/subpage/meethuangshi/userInfo?uid='+userProfile.userId)">
							<view class="flex mb10">
								<text class="c343 bold mr10">{{ userProfile.nickName }}</text>
								<image
									:src="'https://hxs.dsjhs.com:553/prod-api/profile/yujian/' + userProfile.sex + '.png'"
									mode="" style="width: 30rpx;height: 30rpx;"></image>
							</view>
							<view class="c343 f26 mb10">
								<text class="mr10" v-if="userProfile.year">{{ userProfile.year }}岁</text>
								<text class="mr10" v-if="userProfile.height">{{ userProfile.height }}cm</text>
								<text class="mr10" v-if="userProfile.weight">{{ userProfile.weight }}kg</text>
								<text v-if="userProfile.edu">{{ userProfile.edu }}</text>
							</view>
							<view class="flex">
								<view class="flex" v-if="userProfile.idCert === 2">
									<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/sm.png" mode=""
										style="width: 26rpx;height: 26rpx;"></image>
									<text class="c666 f24 ml10">实名</text>
								</view>
								<view class="flex ml20" v-if="userProfile.jobCert === 2">
									<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/gz.png" mode=""
										style="width: 26rpx;height: 26rpx;"></image>
									<text class="c666 f24 ml10">工作</text>
								</view>
							</view>
						</view>
						<view>
							<u-button size="small" shape="circle" type="primary" color="#A6CAF1"
								:customStyle="{ 'color': '#34314F', 'border': '1px solid #fff' }"
								@click="nologinJump('/subpage/meethuangshi/editUserInfo')">编辑资料</u-button>
						</view>
					</view>
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex textC">
					<view class="c343 mr30" @click="handleToLike(1)">
						<view class="f28 bold">{{userProfile.likeNum}}</view>
						<view class="f26">我喜欢</view>
					</view>
					<view class="c343 mr30" @click="handleToLike(0)">
						<view class="f28 bold">{{userProfile.beLikeNum}}</view>
						<view class="f26">喜欢我</view>
					</view>
					<view class="c343 mr30" @click="handleToEachOther">
						<view class="f28 bold">{{userProfile.mutualLikeNum || 0}}</view>
						<view class="f26">相互喜欢</view>
					</view>
				</view>
				<u-gap height="20"></u-gap>
				<view class="menu-box flex-jus">
					<view class="menu-item flex-au bgFff radius30 flex1 mr20"
						@click="openUrl('/subpage/meethuangshi/myActivity')">
						<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/lb.png" mode=""
							style="width: 40rpx;height: 40rpx;">
						</image>
						<text class="c343 f26">我的活动</text>
					</view>
					<view class="menu-item flex-au bgFff radius30 flex1 mr20"
						@click="openUrl('/subpage/meethuangshi/myOrg')">
						<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/zz.png" mode=""
							style="width: 40rpx;height: 40rpx;">
						</image>
						<text class="c343 f26">我的组织</text>
					</view>
					<view class="menu-item flex-au bgFff radius30 flex1"
						@click="openUrl('/subpage/meethuangshi/complaint')">
						<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/ts.png" mode=""
							style="width: 40rpx;height: 40rpx;">
						</image>
						<text class="c343 f26">我的投诉</text>
					</view>
				</view>
			</view>
			<view class="mt20">
				<u-tabs :list="navList" :scrollable="false" :current="navIndex" keyName="name" @click="navClick"
					lineColor="linear-gradient(170deg, #FFA5F5, #319EFF)" lineHeight="4" lineWidth="30" :activeStyle="{
						color: '#34314F',
						fontWeight: 'bold'
					}"></u-tabs>
			</view>
			<view class="m30" v-if="listData.length > 0">
				<waterfall-flow :dataArray="listData"></waterfall-flow>
			</view>
		</view>
	</view>
</template>

<script>
	import navCom from '@/components/nav/nav.vue';
	import waterfallFlow from '@/components/waterfall-flow/index.vue';
	import {
		getPersonInfo
	} from '@/common/api_meethuangshi.js';
	import {
		getVloglist
	} from '@/common/api_wan.js';
	import {
		getUserlikes
	} from '@/common/api_user.js';
	export default {
		name: '',
		components: {
			waterfallFlow,
			navCom
		},
		data() {
			return {
				userId: '',
				userProfile: {},
				navIndex: 0,
				navList: [{
						name: '动态',
						value: '1'
					},
					{
						name: '收藏',
						value: '2',
						busine: '1',
						operation: '3'
					},
					{
						name: '赞过',
						value: '3',
						busine: '2',
						operation: '3'
					}
				],
				listData: []
			}
		},
		onLoad(option) {
			//this.userId = options.id

		},
		onShow() {
			this.getPersonInfo();
			this.reSetListdata()
		},
		methods: {
			async getPersonInfo() {
				const userId = await this.getUserId()
				if (!userId) {
					console.log('用户信息获取失败或用户未登录')
					return
				}
				const res = await getPersonInfo({
					userId: userId
				})
				this.userProfile = res.data
			},
			async getVloglist() {
				const res = await getVloglist();
				this.listData = res.data;
			},
			async getUserlikes(operation, busine) {
				const res = await getUserlikes({
					operation,
					busine
				})
				if (res.code == 200) {
					this.listData = res.data;
				}
			},
			reSetListdata(){
				this.listData = [];
				if (this.navIndex == 0) {
					this.getVloglist()
				}else{
					this.getUserlikes(this.navList[this.navIndex].busine, this.navList[this.navIndex].operation)
				}
			},
			navClick(item) {
				this.navIndex = item.index;
				this.reSetListdata()
			},
			handleToLike(type) {
				uni.navigateTo({
					url: '/subpage/meethuangshi/likeme?type=' + type
				});
			},
			handleToEachOther() {
				uni.navigateTo({
					url: '/subpage/meethuangshi/likeEachOther'
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 0;
	}

	.warning {
		background-color: #415366;
		padding: 10rpx 30rpx;
	}

	.user-box {
		padding: 0 30rpx;

		.user_img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			border: 1px solid #fff;
		}

		.menu-item {
			padding: 26rpx 20rpx;
		}
	}
</style>